<template>
	<van-address-list v-if="isShow" v-model="store.chosenAddressId" :list="store.addressArr" default-tag-text="默认" @add="onAdd" @edit="onEdit" @select="chooseAddress" />
	<van-address-edit
		v-else
		:area-list="areaList"
		show-postal
		show-delete
		show-set-default
		show-search-result
		:address-info="addressinfo"
		:area-columns-placeholder="['请选择', '请选择', '请选择']"
		@save="onSave"
		@delete="onDelete"
	/>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { areaList } from '@vant/area-data';
import useCartstore from '../../../stores/cart';
import { useRouter } from 'vue-router';
const router = useRouter();

const store = useCartstore();
const isShow = ref(true);
const addressinfo = ref({}); //收货信息初始值
const editflay = ref(true);
const editIndex = ref('');
// 新增
const onAdd = () => {
	editflay.value = false;
	addressinfo.value = {};
	isShow.value = false;
};
// 修改
const onEdit = (item, index) => {
	addressinfo.value = item;
	editflay.value = true;
	editIndex.value = index;
	isShow.value = false;
};
// 保存
const onSave = (contactInfo) => {
	store.addAddress(contactInfo, editflay.value, editIndex.value);
	isShow.value = true;
};
// 删除
const onDelete = ({ id }) => {
	store.removeAddress(id);
	isShow.value = true;
};
// 确定是这个地址吗？
const chooseAddress = (item) => {
	store.chosenAddress = item;
	router.push('/cart/submit');
};

onMounted(() => {
	store.getAddress();
}, [store.addressArr]);
onMounted(() => {
	store.getAddress();
});
</script>

<style lang="less" scoped>
:deep(.fanhui) {
	position: fixed;
	bottom: 100px;
}
</style>
